<template>
	<view class="main bgColor-white" >
		<cu-custom :key="'header'+headerKey" :bgColor="userType=='20'?'bg-gradual-blue-light':'bg-gradual-orange-light'"  :isBack="true" backText="返回" title="绑定用户"></cu-custom>
		<view class="logoImgBox">
			<text style="font-size: 150rpx;" class="iconfont" :class="userType=='20'?'text-blue-light icon-gerenshebao':'text-orange-light icon-danwei'"></text>
		</view>
		<view class="content">
			<view class=" margin-top-sm">
				<zh-input v-if="userType=='20'" type="text"  v-model="fullName" fontSize="32rpx" maxlength="50" placeholder="请输入姓名" :iconClass="['iconfont','icon-yonghu','text-blue-light']" ></zh-input>
			</view>
			<zh-picker
				v-if="userType=='20'"
				:iconClass="['basefont icon-circlefill',userType=='20'?'text-blue-light':'text-orange-light']"
				rightIconClass="text-blue-light"
				pickerRef="cardTypeRef"
				mode="selector"
				inputAlign="left"
				:value="cardType"
				:options="cardTypeData"
				placeholder="请选择证件类型"
				:disabled="cardTypeDisabled"
				themeColor="#0081ff"
				@pickerChange="onCardTypeChange($event)"
				:defaultProps="{label:'dictValue',value:'dictKey'}"
				ref="cardTypeRef"
			></zh-picker>
			<zh-input v-if="userType=='20'" type="idcard" v-model="idcard" fontSize="32rpx" maxlength="18" placeholder="请输入身份证号/护照号" :iconClass="['iconfont','icon-idcard','text-blue-light']" ></zh-input>
			<zh-picker
				v-if="userType=='30'"
				:iconClass="['iconfont','icon-danwei',userType=='20'?'text-blue-light':'text-orange-light']"
				:rightIconClass="userType=='20'?'text-blue-light':'text-orange-light'"
				fontSize="32rpx"
				pickerRef="org"
				mode="selector"
				:value="orgId"
				:options="orgData"
				inputAlign="left"
				placeholder="请选择单位"
				:disabled="orgDisabled"
				:themeColor="userType=='20'?'#0081ff':'#f37b1d'"
				@pickerChange="onOrgChange($event)"
				:defaultProps="{label:'orgName',value:'orgId'}"
				defaultType="orgId"
				ref="org"
			></zh-picker>
			<zh-input type="number" v-model="cellphone" fontSize="32rpx" maxlength="11" :placeholder="userType=='20'?'请输入手机号码':'请输入管理员手机号码'" :iconClass="['iconfont','icon-shouji',userType=='20'?'text-blue-light':'text-orange-light']" ></zh-input>
			<view v-if="showImgCode" class="cu-form-group">
				<view class="title">
				<text class="iconfont icon-yanzhengma1" style="font-size: 32rpx;" :class="userType=='20'?'text-blue-light':'text-orange-light'"></text>
				</view>
				<input type="text" style="font-size: 32rpx;" maxlength="4" name="" v-model="imgCode" placeholder="请输入图片验证码"/>
				<image :src="imgSrc" @click="initCode" mode="" class="img-captcha"></image>
			</view>
			<zh-input type="number" maxlength="4" v-model="shortMsgCode" fontSize="32rpx" :iconClass="['iconfont','icon-yanzhengma',userType=='20'?'text-blue-light':'text-orange-light']" :rightButtonFlag="true" :rightButton="{disabled:!codeClick,text:codeBut,bg:userType=='20'?'bg-blue-light':'bg-orange-light'}" @right-button-click="getCode" placeholder="请输入手机验证码" ></zh-input>
			<zh-input v-if="showPassword" v-model="userPassword" maxlength="16" fontSize="32rpx" placeholder="请输入登录密码" :password="true" :iconClass="['iconfont','icon-mima',userType=='20'?'text-blue-light':'text-orange-light']" :rightIconClass="userType=='20'?'text-blue-light':'text-orange-light'"></zh-input>
			<view class="flex flex-direction" style="padding-top: 10rpx;">
				<button class="cu-btn shadow margin-tb-sm lg " :class="userType=='20'?'bg-gradual-blue-light':'bg-gradual-orange-light'" @click="bindUser">绑<text style="width: 50rpx;"></text>定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util/util.js'
	import md5 from 'md5'
	import systemConfig from '@/common/config/systemConfig.js'
	import reqConfig from '@/common/config/reqConfig.js'
	import store from "@/store"
	import api from '@/api/system/login.js'
	export default {
		onShow() {
			this.headerKey += 1;
		},
		onReady() {
			if(!this.loginKey){
				this.loginKey = util.uuid()
			}
			
		},
		onLoad: function (option) { 
			this.userType=option.userType;
			this.gotoPath=option.gotoPath
			this.infoRes=option.infoRes;
			this.code=option.code;
			let goBackFlag=option.goBackFlag;
			if(goBackFlag||goBackFlag=='true'){
				this.goBackFlag=true
			}else{
				this.goBackFlag=false
			}
			
		},
		data() {
			return {
				headerKey:0,
				windowHeight:this.$windowHeight,
				goBackFlag: false,
				gotoPath:"",
				userType: "20",
				openId:"",
				infoRes:{},
				codeBut:"获取验证码",
				codeTimer: "",//验证码定义一个定时器的变量
				codeClick:true,
				loginKey: "",
				showImgCode:false,
				imgSrc:"",
				cellphone: "",
				shortMsgCode: "",
				imgCode: "",
				fullName:"",
				idcard:"",
				showPassword:false,
				userPassword:"",
				orgId:"",
				orgDisabled:false,
				orgData:[],
				cardType:"01",
				cardTypeDisabled:false,
				cardTypeData:[{dictKey:'01',dictValue:'身份证'},{dictKey:'02',dictValue:'护照'}]
			}
		},
		methods: {
			initCode() {
				const url = reqConfig.baseUrl+"/sso/jycy/getImgCode?loginKey="+this.loginKey+"&time="+new Date().getTime()
				this.imgSrc=url
			},
			onOrgChange(e) {
				this.orgId = e.value;
			},
			onCardTypeChange(e) {
				this.cardType = e.value;
			},
			// 获取验证码
			getCode(){
				var _that = this
				// 倒计时
				if(_that.codeClick){
					if (!this.$validate.isPhone(_that.cellphone)) {
					  uni.showToast({
					    icon: 'none',
					    title: '请输入正确的手机号',
						duration:2000
					  })
					}else{
						
						// 发送短信
						const sendData = {};
						sendData.loginKey=this.loginKey;
						sendData.cellphone=this.cellphone;
						sendData.smsSendType= 'bindUser';
						sendData.imgCode= this.imgCode;
						sendData.orgId= this.orgId;
						sendData.userType= this.userType;
						this.$http.post(api.loginSendMessage, sendData).then(res => {
							this.showPassword=!res.result
							uni.showToast({
							  icon: 'none',
							  title: '短信发送成功',
							  duration:2000
							})
							_that.codeClick = false
							// 倒计时开始
							var daojishi = 60
							_that.codeTimer = setInterval(function(){
								_that.codeBut = "重新发送"+daojishi;
								daojishi--
								if(daojishi<=0){
									_that.codeBut = "重新发送"
									_that.codeClick = true
									clearInterval(_that.codeTimer);
								}
							},1000)
						}).catch(error => {
							
						})
						
					}
				}
			},
			// 绑定用户
			bindUser(){
				if(!this.cardType){
					uni.showToast({
						title: '请输入证件类型',
						icon: 'none',
						duration:2000
					});
					return ;
				}else if(!this.idcard){
					uni.showToast({
						title: '请输入身份证或护照号',
						icon: 'none',
						duration:2000
					});
					return ;
				}else if(!this.fullName){
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration:2000
					});
					return ;
				}else if(!this.cellphone){
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration:2000
					});
					return ;
				}else if(!this.shortMsgCode){
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none',
						duration:2000
					});
					return ;
				}
				if(this.showPassword){
					if(!this.userPassword){
						uni.showToast({
							title: '请输入密码',
							icon: 'none',
							duration:2000
						});
						return ;
					}
				}
				if (!this.$validate.isPhone(this.cellphone)) {
				  uni.showToast({
				    icon: 'none',
				    title: '请输入正确的手机号',
					duration:2000
				  })
				  return
				}
				if(this.cardType=='01'){
					if(!this.$validate.isIdcard(this.idcard)){
						uni.showToast({
						  icon: 'none',
						  title: '请输入正确的身份证号',
						  duration:2000
						})
						return
					}
				}
				const data ={}
				data.cellphone=this.cellphone
				data.code=this.code
				data.userType =this.userType
				data.shortMsgCode =this.shortMsgCode
				data.imgCode = this.imgCode
				if(this.userPassword){
					data.userPassword = md5(this.userPassword)
				}
				data.orgId =this.orgId
				data.equipmentType = 'app'
				data.cartType = this.cardType
				data.idcard = this.idcard
				data.openId = store.state.hh_openid
				data.fullName = this.fullName
				data.version = systemConfig.version
				data.systemCode = systemConfig.systemCode
				data.systemName = systemConfig.systemName
				if(this.infoRes){
					data.encryptedData = this.infoRes.encryptedData
					if(this.infoRes.userInfo){
						data.nickName = this.infoRes.userInfo.nickName
						data.avatarUrl = this.infoRes.userInfo.avatarUrl
					}
				}
				this.$http.post(api.winxinBindUser, data).then(res => {
					this.$u.vuex('hh_token', res.result.accessToken)
					this.$u.vuex('hh_openid', res.result.openId)
					
					setTimeout(() => {
					    const sessionData={}
					    this.$http.post(api.getSessionInfo, sessionData).then(res => {
					    	const sessionInfo=res.result
					    	this.$u.vuex('hh_user', sessionInfo)
							this.userType=sessionInfo.userType
							this.$u.vuex('hh_userType', sessionInfo.userType)
							if(this.goBackFlag){
								this.$Router.back(2)
							}else if(this.gotoPath){
								let path=this.gotoPath
								//#ifndef H5
									path=util.decodePath(path)
								//#endif
								this.$Router.replaceAll({ path:path})
							}else{
								this.gotoHome()
							}
							
					    }).catch(error => {
					    	
					    })
					}, 100 );
				}).catch(error => {
					
				})
				
			},
			gotoHome: function () {
				this.$Router.replaceAll({ name:'home', query: { userType:this.userType }})
			}
		},
		beforeDestroy() {
			if (this.codeTimer) {
			    clearInterval(this.codeTimer); // 在Vue实例销毁前，清除我们的定时器
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100%;
	}
	.content{
		width: 600rpx;
		margin: 60rpx auto;
	}
	.logoImgBox {
		text-align: center;
		height: 200rpx;
		margin: 0 auto;
		margin-top: 0rpx;
		margin-bottom: 30rpx;
	}
	.img-captcha{
		width: 200rpx;
		line-height: 60rpx;
		height: 60rpx;
		text-align: center;
		margin: 0;
	}
</style>
